.big_box {
    position: absolute;
    width: 120px;
    height: 200px;
    font-size: 0;
    top: 100px;
    left: 47%;
    z-index: 20;
}

.big_box div {
    display: inline-block;
    position: relative;
    width: 50px;
    line-height: 50px;
    font-size: 14px;
    height: 50px;
    text-align: center;
    vertical-align: bottom;
    border-radius: 50%;
}

.box1 {
    background-color: orange;
    animation: boxOne 6s linear 0.5s infinite both;
}

@keyframes boxOne {
    0% {
        top: 0px;
        left: 0px;
        background-color: orange;
    }
    10% {
        top: 0px;
        left: 50px;
        background-color: skyblue;
    }
    20% {
        top: 0px;
        left: 50px;
    }
    30% {
        top: 0px;
        left: 100px;
    }
    40% {
        top: 50px;
        left: 100px;
    }
    50% {
        top: 50px;
        left: 50px;
        background-color: pink;
    }
    60% {
        top: 50px;
        left: 50px;
        background-color: pink;
    }
    70% {
        top: 50px;
        left: 0px;
        background-color: khaki;
    }
    80% {
        top: 0px;
        left: 0px;
        background-color: orange;
    }
    90% {
        top: 0px;
        left: 0px;
    }
}

.box2 {
    background-color: skyblue;
    animation: boxTwo 6s linear 0.5s infinite both;
}

@keyframes boxTwo {
    0% {
        top: 0px;
        left: 0px;
        background-color: skyblue;
    }
    10% {
        top: 0px;
        left: 50px;
    }
    20% {
        top: 50px;
        left: 50px;
    }
    30% {
        top: 50px;
        left: 0px;
        background-color: pink;
    }
    40% {
        top: 50px;
        left: 0px;
    }
    50% {
        top: 50px;
        left: -50px;
        background-color: khaki;
    }
    60% {
        top: 0px;
        left: -50px;
        background-color: orange;
    }
    70% {
        top: 0px;
        left: 0px;
        background-color: skyblue;
    }
    80% {
        top: 0px;
        left: 0px;
    }
    90% {
        top: 0px;
        left: 0px;
    }
}

.box3 {
    background-color: khaki;
    animation: boxThree 6s linear 0.5s infinite both;
}

@keyframes boxThree {
    0% {
        top: 0px;
        left: 0px;
        background-color: khaki;
    }
    10% {
        top: 0px;
        left: 0px;
    }
    20% {
        top: -50px;
        left: 0px;
        background-color: orange;
    }
    30% {
        top: -50px;
        left: 50px;
        background-color: skyblue;
    }
    40% {
        top: -50px;
        left: 50px;
    }
    50% {
        top: -50px;
        left: 100px;
    }
    60% {
        top: 0px;
        left: 100px;
    }
    70% {
        top: 0px;
        left: 50px;
        background-color: pink;
    }
    80% {
        top: 0px;
        left: 50px;
    }
    90% {
        top: 0px;
        left: 0px;
        background-color: khaki;
    }
}

.box4 {
    background-color: pink;
    animation: boxFore 6s linear 0.5s infinite both;
}

@keyframes boxFore {
    0% {
        top: 0px;
        left: 0px;
        background-color: pink;
    }
    20% {
        top: 0px;
        left: 0px;
    }
    30% {
        top: 0px;
        left: -50px;
        background-color: khaki;
    }
    40% {
        top: -50px;
        left: -50px;
        background-color: orange;
    }
    50% {
        top: -50px;
        left: 0px;
        background-color: skyblue;
    }
    60% {
        top: -50px;
        left: 0px;
    }
    70% {
        top: -50px;
        left: 50px;
    }
    80% {
        top: 0px;
        left: 50px;
    }
    90% {
        top: 0px;
        left: 0px;
        background-color: pink;
    }
}